/* webpack的配置文件 所有配置 都写在这里 */
const path = require('path')

// 引入删除dist的插件
const cleanDist = require('clean-webpack-plugin')
// 引入打包html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取css的
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 取出我们设置的环境变量
const NODE_ENV = process.env.NODE_ENV

const glob = require('glob');

// 算出入口对象
const urls = glob.sync('./src/js/*.js')
const entryObj = {}
urls.forEach(function (url) {
    entryObj[path.basename(url).replace(/\.js/, '')] = url
})

// 配置页面
const pages = glob.sync('./src/pages/*.html')
const pageConfig = pages.map(function (page) {
    let name = path.basename(page).replace(/\.html/, '')
    return new HtmlWebpackPlugin({
        template: page,
        filename: name + '.html',
        chunks: [name], // 需要的模块  entry里面的key就是模块
    })
})

// 把webpack的配置暴露出去
module.exports = {
    /* 写webpack配置 */
    // 2出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: './', // 查找静态资源的公共路径
    },

    // 3loader加载器
    module: {
        // 打包规则
        rules: [
            // 打包css
            {
                test: /\.css$/, // 要处理的文件格式
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    },
                    'css-loader'
                ], // 要使用的loader 多个使用数组 处理顺序是从后到前
            },
            // 打包less
            {
                test: /\.less$/, // 要处理的文件格式
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',
                    }
                }, 'css-loader', 'less-loader'],
            },
            // 打包图片
            {
                test: /\.(jpg|png|gif|webp)$/, // 要处理的文件格式
                loader: 'url-loader', // 单个loader 可以自定义配置
                // 这个loader的自定义配置
                options: {
                    name: '[hash:16].[ext]', // 名字长度16位
                    limit: 1 * 1024, // 大小 10kb
                    esModule: false, // 关闭es6的模块化 避免和其他插件冲突
                    outputPath: 'imgs', // 输出的文件夹
                }
            },
            // 打包html中的图片
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            // 打包字体图标
            {
                test: /\.(woff|woff2|ttf|eot|svg)$/, // 要处理的文件格式
                loader: 'file-loader', // 单个loader 可以自定义配置
                // 这个loader的自定义配置
                options: {
                    name: '[hash:16].[ext]', // 名字长度16位
                    outputPath: 'fonts', // 输出的文件夹
                }
            },
            // es6 -> es5
            {
                test: /\.js$/,
                loader: 'babel-loader', // 编译es6 -> es5
                exclude: /node_modules/, // 排除 
            }
        ]
    },

    // 5模式
    mode: NODE_ENV === 'dev' ? 'development' : 'production',

    // 6 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        port: 6060,  // 端口
        open: true, // 自动打开服务器(弹出浏览器)
        publicPath: '/', // 静态资源查找路径
        openPage: 'ad.html', // 打开的页面
    },

    // 7 目标是浏览器
    target: 'web',

    // 多入口
    entry: entryObj,

    // 4插件
    plugins: [
        // 清除dist的插件 每次打包 会先删除上一次的dist 然后再生成新的
        new cleanDist.CleanWebpackPlugin(),

        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),

        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

    ].concat(pageConfig),

}
